<template>
  <!-- :destroyOnClose="true" -->
  <a-modal
    :title="`充值`"
    :width="680"
    :visible="visible"
    :confirmLoading="loading"
    @ok="
      () => {
        $emit('ok')
      }
    "
    @cancel="
      () => {
        $emit('cancel')
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form :form="form" :labelCol="{ sm: { span: 4 } }" :wrapperCol="{ sm: { span: 19 } }" :selfUpdate="true">
        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
        <a-form-item label="方向">
          <!-- <a-input v-decorator="['amount', { rules: [{ required: true, message: '请输入金额数' }] }]" /> -->
          <a-select
            v-decorator="['direct', { rules: [{ required: true, message: `方向不能为空` }] }]"
            show-search
            placeholder="请输入选择方向"
          >
             <a-select-option v-for="it in BalanceTypeList" :key="it.id">
                {{it.name}}
              </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="金额">
          <a-input-number
            class="awm"
            :min="0"
            v-decorator="['money', { rules: [{ required: true, message: '请输入金额数' }] }]"
            placeholder="请输入金额"
          />
        </a-form-item>
        <a-form-item label="用户">
          <a-select
            v-decorator="['userId', { rules: [{ required: true, message: `用户不能为空` }] }]"
            show-search
            placeholder="请输入选择用户"
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :options="user.list"
            @search="handleSearch"
          >
            <a-spin v-if="user.fetching" slot="notFoundContent" size="small" />
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
    <!-- <template slot="footer">
      <a-button
        @click="
          () => {
            $emit('cancel')
          }
        "
        >取消</a-button
      >
      <a-button
        v-if="showSave"
        @click="
          () => {
            $emit('ok', 0)
          }
        "
        type="dashed"
        :spinning="loading"
        >保存</a-button
      >
      <a-button
        @click="
          () => {
            $emit('ok', 2)
          }
        "
        type="primary"
        :spinning="loading"
        >提交</a-button
      >
    </template> -->
  </a-modal>
</template>

<script>
import { Cascader } from 'ant-design-vue'
import { mapGetters } from 'vuex'
import { uploadForQiniu } from '@/utils/qiniu'
import { userListByNoAuth } from '@/api/noAuth'
import { BalanceTypeList } from '@/utils/other'
// 表单字段

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    typeList: {
      type: Array,
      default: () => [],
    },
    model: {
      type: Object,
      default: () => null,
    },
    financeTypeList: {
      type: Array,
      default: () => [],
    },
    showSave: {
      type: Boolean,
      default: true,
    },
    type: {
      type: Number,
      default: 1,
    },
  },
  components: {
    'a-cascader': Cascader,
  },
  data() {
    return {
      form: this.$form.createForm(this),
      f_typeList: [],
      fileList: [],
      uid: null,
      user:{
        fetching:false,
        timeout:null,
        list:[]
      },
      BalanceTypeList
    }
  },
  created() {
    let that = this
    
    // 防止表单未注册

    // 当 model 发生改变时，为表单设置值
    this.$watch('visible', (n) => {
      if(n){
        this.handleSearch('','',true)
      }else{
        this.form.resetFields()
      }
    })
    
  },
  methods: {
    handleSearch(a_val, a_id, a_init) {
      let data = { pageNum: 1, pageSize: a_init ? 10 : 100, name: a_val, id: a_id, type: 2 }
        if (this.user.timeout) {
          clearTimeout(this.user.timeout)
        }
        this.user.fetching = true
        this.user.timeout = setTimeout(() => {
          userListByNoAuth(data)
            .then((res) => {
              this.user.list = res.data.data.map(v=>{
                return {
                  value: v.id,
                  label: v.name
                }
              })
              if (a_id) {
                this.model && this.form.setFieldsValue({ userId: a_id })
              }
            })
            .finally(() => (this.user.fetching = false))
        }, 200)
    },
    handleDelFileList(a_index) {
      this.fileList.splice(a_index, 1)
    },
    handleRemove(a_item) {
      let self = this
      let index = self.fileList.findIndex((v) => a_item.uid == v.uid)
      self.fileList.splice(index, 1)
    },
    getFile() {
      return this.fileList.map((v) => {
        return { fileUrl: v.name }
      })
    },
  },
  computed: {
    ...mapGetters({ baseUrl: 'baseUrl' }),
    // c_typeList: function () {
    //   let type = this.form.getFieldValue('type')
    //   let financeTypeList = this.financeTypeList
    //   let typeList = []
    //   financeTypeList.forEach((v) => {
    //     if (type == v.type) {
    //       typeList.push(v)
    //     }
    //   })
    //   return typeList
    // },
  },
}
</script>
<style scoped lang="less">
.file-list {
  padding: 0;
  margin-top: 10px;
  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    line-height: 18px;
    position: relative;
    cursor: pointer;
    .close {
      display: none;
    }
    &:hover {
      background-color: #40a9ff10;
      .close {
        display: block;
      }
    }
  }
}
// .file-list
/* .file-list li .close {
  position: absolute;
  right: 10px;
  top: 10px;
  bottom: 0;
  cursor: pointer;
} */
</style>
